page {
  background-color: #ecebe9;
}

.user-wrap {
  .user_bg {
    height: 40vh;
    overflow: hidden;
    position: relative;

    .bd_image {
      .bg_img {
        width: 100%;
        filter: blur(4px);
      }
    }

    .user_avatar {
      position: absolute;
      top: 60rpx;
      left: 50%;
      transform: translateX(-50%);

      .avatar {
        height: 140rpx;
        width: 140rpx;
        border-radius: 50%;
      }

      .user_name {
        text-align: center;
        padding-top: 70rpx;
        color: #fff;
        font-size: 30rpx;
      }

    }


  }

  .user_bd {
    position: absolute;
    top: 400rpx;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 95%;
    display: flex;
    justify-content: center;

    .my_message {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #9da1a4;
      padding: 10rpx 0;
    }
  }

  .panel-wrap {
    margin-top: 80rpx;

    .panel-order_mes {
      background-color: #fff;

      .my_order {
        height: 70rpx;
        border-bottom: 1px solid #ccc;
        line-height: 70rpx;
        padding: 0 20rpx;
        color: #999;

      }

      .order_message {
        display: flex;

        .bd {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 20rpx 0;

          .hd_pic {
            color: var(--themeColor);
            font-size: 50rpx;
          }

          .bd_text {
            color: #999;
          }
        }
      }
    }

    .bd_list {

      .items {
        height: 80rpx;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        line-height: 80rpx;
        padding: 0 15rpx;
        color: #999;

        &:nth-child(1) {
          margin: 20rpx 0;
        }

        &:last-child {
          margin: 15rpx 0;
        }

        &:nth-child(2) {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}